<template>
  <a-list class="role-list" itemLayout="vertical" :dataSource="roles">
    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
      <a-list-item-meta :style="{ marginBottom: '0' }">
        <!-- <span slot="description" style="text-align: center; display: block">{{ item.remark }}</span> -->
        <a
          :class="[ listIndex === index ? 'active' : '' ]"
          slot="title"
          style="text-align: center; display: block"
          @click="edit(item, index)"
        >
          {{ `${item.roleName}` }}
          <span v-show="item.remark">{{ `(${item.remark})` }}</span>
          <el-button
            icon="el-icon-delete"
            class="fr"
            v-if="item.roleId !== '-1'"
            size="mini"
            @click.stop="handleDelete(item)"
            type="danger"
          />
        </a>
      </a-list-item-meta>
    </a-list-item>
  </a-list>
</template>

<script>
import { getRoleList, queryInfoById, roleDelete } from '@/api/role'
import { openNotification } from '@/utils/util'

export default {
  data() {
    return {
      listIndex: '',
      roles: [],
      mdl: {},
      permissions: []
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    handleDelete(item) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${item.roleName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await roleDelete(item.roleId, {})
          if (res.state === '0000000') {
            openNotification('success', '删除角色成功')
          }
          _this.getRoleList()
        }
      })
    },
    changeRole() {
      this.listIndex = this.roles.length - 1
    },
    // 获取左边列表数据
    getRoleList(param = false) {
      getRoleList().then(res => {
        this.roles = res.data
        this.roles.push({
          roleId: '-1',
          roleName: '新增角色',
          remark: '新增一个角色'
        })
        if (param) {
          this.changeRole()
        }
      })
    },
    add() {
      this.edit({ id: 0 })
    },
    async edit(record, index) {
      this.listIndex = index
      if (record.roleId === '-1') {
        this.$emit('setFields', {}, [])
        this.$emit('treeChange', [])
        return false
      }
      const res = await queryInfoById({ roleId: record.roleId })
      const {
        state,
        data: { menuInfo, permissionList }
      } = res
      if (state === '000000') {
        let arr = []
        if (menuInfo.length > 0) {
          for (let i = 0; i < menuInfo.length; i++) {
            arr.push(menuInfo[i].menuId)
          }
        }
        let parentArr = []
        if (permissionList.length > 0) {
          permissionList.map(v => {
            // if (!v.parentId) {
            parentArr.push(v.permissionId)
            // }
          })

          // let permissionArr = []
          // permissionList.map(v => {
          //   parentArr.map(j => {
          //     if ( v.parentId === j.permissionId ){
          //       permissionArr
          //     }
          //   })
          // })
        }
        this.$emit('treeChange', arr)
        this.$emit('perTreeChange', parentArr)

        this.mdl = Object.assign(this.mdl, { ...record, menuId: arr.join(','), sysPermissionId: parentArr.join(',') })

        this.$nextTick(() => {
          this.$emit('setFields', this.mdl)
        })
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style scoped>
.role-list >>> .ant-list-item-meta {
  margin-bottom: 0;
}
.role-list >>> .ant-list-item {
  padding-bottom: 0;
}
.role-list >>> .ant-list-item-meta-title a.active {
  color: #1890ff;
}
</style>